<template>
  <ry-modal
    title="预约管理"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel" v-model="visible" destroyOnClose
    :ryfooter="null" width="1000px"
  >
      <div class="table-page-search-wrapper">
        <a-form-item>
          <a-button class="editable-add-btn" type="primary" @click="handleAdd">
            新增
          </a-button>
        </a-form-item>
      </div>
      <a-row>
        <a-col :span="24">
          <a-table bordered :data-source="scheduleData" :columns="columns" rowKey="indexKey">
            <template slot="appointName" slot-scope="text, record">
              <a-input v-model="record.appointName" :disabled="record.status === '1'"/>
            </template>
            <template slot="appointPhone" slot-scope="text, record">
              <a-input v-model="record.appointPhone" :disabled="record.status === '1'"/>
            </template>
            <template slot="appointCont" slot-scope="text, record">
              <a-input v-model="record.appointCont" :disabled="record.status === '1'"/>
            </template>
            <template slot="appointDate" slot-scope="text, record">
              <a-date-picker @change="(date) => setAppointDate(record, date)" v-model="record.appointDate" :disabled="record.status === '1'" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"/>
            </template>
            <template slot="appointTime" slot-scope="text, record">
              <a-time-picker v-model="record.appointTime" @change="(time) => onChange(record, time)" format="HH:mm" valueFormat="HH:mm" :disabled="record.status === '1'">
                <a-icon slot="suffixIcon" type="smile" />
              </a-time-picker>
            </template>
            <template slot="operation" slot-scope="text, record">
              <a-space size="middle" >
                <a-button v-if="record.status === '0' && record.id" @click="handleSignInCancel(record)" type="primary">签到核销</a-button>
                <a-button v-if="record.status === '0'" @click="handleSignIn(record)" type="danger">保存</a-button>
                <a-button v-if="record.status === '0' && record.id != null" @click="handleSignInDelete(record)">取消</a-button>
              </a-space>
              <a-button v-if="record.status === '1'" disabled="">已核销</a-button>
            </template>
          </a-table>
        </a-col>
      </a-row>
  </ry-modal>
</template>

<script>
export default {
  name: 'ScheduleFormModal',
  props: {
    url: {
      type: Object,
      default: () => ({})
    },
    date: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      confirmLoading: false,
      visible: false,
      form: {},
      scheduleData: [],
      columns: [
        {
          title: '预约名称',
          dataIndex: 'appointName',
          align: 'center',
          scopedSlots: { customRender: 'appointName' }
        },
        {
          title: '预约手机号',
          dataIndex: 'appointPhone',
          align: 'center',
          scopedSlots: { customRender: 'appointPhone' }
        },
        {
          title: '预约内容',
          dataIndex: 'appointCont',
          align: 'center',
          scopedSlots: { customRender: 'appointCont' }
        },
        {
          title: '预约日期',
          dataIndex: 'appointDate',
          align: 'center',
          scopedSlots: {customRender: 'appointDate'}
        },
        {
          title: '预约时间',
          dataIndex: 'appointTime',
          align: 'center',
          scopedSlots: {customRender: 'appointTime'}
        },
        {
          title: '操作',
          dataIndex: 'operation',
          align: 'center',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    }
  },
  watch: {

  },
  methods: {
    show (value) {
      console.log(value)
      this.scheduleData = []
      this.visible = true
      this.scheduleData = JSON.parse(JSON.stringify(value))
    },
    handleAdd () {
      const newData = {
        appointName: '',
        appointPhone: '',
        appointCont: '',
        appointTime: null,
        appointDate: this.date,
        businessId: this.$store.getters.userInfo.id,
        status: '0'
      }
      this.scheduleData.push(newData)
      console.log(this.scheduleData)
    },
    handleCancel () {
      this.$emit('cancel')
    },
    handleSignIn (record) {
      console.log('handleSignIn', record)
      if (record.appointName === '') {
        this.$message.warning('请输入预约名称！')
        return
      }
      if (record.appointTime === null) {
        record.appointTime = ''
        // return
      }
      let url = this.url.add
      if (record.id) {
        url = this.url.edit
      }
      this.$post(url, record).then(response => {
        if (response.status === 200) {
          this.$message.success('保存成功')
        }
        this.visible = false
        this.$emit('save')
      })
    },
    handleSignInCancel (record) {
      record.status = '1'
      this.$post(this.url.edit, record).then(response => {
        if (response.status === 200) {
          this.$message.success('核销成功')
          // 刷新列表数据
          this.scheduleData = this.scheduleData.map(item => {
            if (item.id === record.id) {
              return record
            }
            return item
          })
        }
        this.$emit('save')
      })
    },
    handleSignInDelete (record) {
      this.$post(this.url.delete, [record.id]).then(response => {
        if (response.status === 200) {
          this.$message.success('删除成功')
        }
        this.visible = false
        this.$emit('save')
      })
    },
    setAppointDate (record, date) {
      record.appointDate = date
      console.log('Formatted date:', date, 'Updated record:', record)
    },
    onChange(record, time) {
      console.log(record, time);
    }
  }
}
</script>

<style lang="less" scoped>
.schedule-section {
  margin-bottom: 16px;

  .section-header {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
  }

  .section-content {
    padding-left: 24px;
  }
}
.editable-add-btn {
  margin-bottom: 8px;
}
</style>
